<template>
  <div class="feedback">
    <div class="feedback-tit">
      意见反馈:
    </div>
    <van-cell-group inset style="padding: 0!important;margin: 16px 0 0 0;background-color: #373737;">
      <van-field
          style="background-color: #373737;"
          v-model="message"
          rows="5"
          autosize
          label=""
          type="textarea"
          maxlength="300"
          placeholder="请输入问题描述，帮助我们更快定位您的问题， 字数≤300（必填）"
          show-word-limit
      />
    </van-cell-group>
    <div style="display: flex;align-items: center;margin-top: 20px">
      <div>
        <van-uploader v-model="fileList" reupload max-count="2" upload-icon="plus" accept=".jpg, .jpeg, .png" :after-read="afterRead" />
      </div>
      <div class="up_load_test">（最多可添加2张图片）</div>
    </div>
    <div class="fk_btn" @click="addFeedback">立即反馈</div>
    <div class="fk_ls">反馈历史</div>
    <div style="display: flex;justify-content: center;" v-for="(item,index) in hasLas" :key="item.id">
      <div style="width: 3575px;border-radius: 5px;padding: 10px;background-color: #373737;margin-top: 12px">
        <div>
          <span v-if="item.status === 1" style="display: inline-block;font-size: 12px;width: 46px;height: 22px;line-height: 22px;background-color: #ec7926;color: #fff;text-align: center;border-radius: 4px">
            待回复
          </span>
          <span v-if="item.status === 2" style="display: inline-block;font-size: 12px;width: 46px;height: 22px;line-height: 22px;background-color: #61F8C5;color: #115F45;text-align: center;border-radius: 4px">
            已回复
          </span>
          <span style="display: inline-block;margin-left: 14px;font-weight: bold;font-size: 14px;color: #797979;line-height: 22px">
            反馈时间:{{item.create_time}}
          </span>
        </div>
        <div style="margin-top: 10px;word-wrap:break-word; word-break:break-all;color: #fff;">
          {{item.content}}
<!--          <van-text-ellipsis style="color: #fff" :content="" expand-text="展开" collapse-text="收起" />-->
        </div>
        <div style="margin-top: 10px" v-if="item.status === 2">
          <span style="display: inline-block;font-weight: bold;font-size: 14px;color: #797979;line-height: 22px">
            ---客服回复时间:{{item.reply_time}}
          </span>
        </div>
        <div style="margin-top: 10px;word-wrap:break-word; word-break:break-all;color: #fff;">
          {{item.reply_content}}
<!--          <van-text-ellipsis style="color: #fff" :content="" expand-text="展开" collapse-text="收起" />-->
        </div>
      </div>

    </div>


  </div>
</template>

<script lang="ts" setup>
import {FeedbackUploadImage, AddFeedback,FeedbackList} from "@/api/mock";
import { ComponentInternalInstance, getCurrentInstance, onMounted  } from 'vue';
import {useRouter} from "vue-router";
import { ref, reactive } from "vue";
import {showFailToast, showSuccessToast} from "vant";
const router = useRouter()
const { proxy } =  getCurrentInstance() as ComponentInternalInstance
onMounted(() => {
  feedbackList()
})
const hasLas = ref([])
const text =
    '似水流年是一个人所有的一切，只有这个东西，才真正归你所有。其余的一切，都是片刻的欢娱和不幸，转眼间就已跑到那似水流年里去了。';
// FeedbackUploadImage()
const feedbackList = ()=>{
  let token = localStorage.getItem("token")
  if(!token){
    showFailToast('请登录');
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
  }
  let pa = {
    user_id:token
  }
  FeedbackList(pa).then(res=>{
    if (+res.code === 200){
      hasLas.value = res.data
    }
  },err=>{})
}
const message = ref('')
const fileList = ref([
  // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);
const addFeedback = ()=>{
  if(!message.value){
    showFailToast('请填写反馈内容')
    return
  }
    //
  let token = localStorage.getItem("token")
  if(!token){
    showFailToast('请登录');
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });

  }
  let pa = {
    user_id:token,
    content:message.value,
    image_one:'',
    image_two:'',
  }
  if(fileList.value.length===1){
    pa.image_one = fileList.value[0].url
  }
  if(fileList.value.length===2){
    pa.image_one = fileList.value[0].url
    pa.image_two = fileList.value[1].url
  }

  AddFeedback(pa).then(res=>{
    if (+res.code === 200){
      feedbackList()
      message.value = ''
      fileList.value = []
      showSuccessToast(res.msg);
    }
  },err=>{

  })
}
const afterRead = (event)=>{

  let prams = new FormData()
  prams.append('file',event.file)

  // let pa = {file:event.file}
  // const { file } = event.target;
  console.log(event.file)
  FeedbackUploadImage(prams).then(
      (res) => {
        if (+res.code === 200){
          let arr = fileList.value.filter((item) => item.select)
          let image = {
            url:proxy.$imgSrc+res.data,
            select:true
          }
          console.log(proxy.$imgSrc+res.data)
          arr.push(image)
          fileList.value = arr
          // console.log(fileList.value)
          // fileList.value.push(res.data)
          // console.log(fileList.value)
          showSuccessToast(res.msg);
        }else{
          showFailToast(res.msg);

        }

      },
      err => {
        console.log(err);
        // showFailToast("请求有误");
      }
  );
  // debugger
}

</script>

<style scoped lang="less">
.fk_ls{
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;
  color: #FFFFFF;
}
.fk_btn{
  font-family: PingFang SC;
  font-size: 18px;
  font-weight: 600;
  //line-height: 25.2px;
  text-align: center;
  color:#fff;
  background-color: #1A674E;
  width: 355px;
  height: 50px;
  line-height: 50px;
  gap: 0px;
  border-radius: 8px 8px 8px 8px;
  opacity: 0px;
  margin: 10px 0;

}
.up_load_test{
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 500;
  line-height: 16.8px;
  text-align: left;
  color:#797979;
}
::v-deep .van-uploader__upload{
  border-radius: 4px;
  background-color: #373737;
}
::v-deep .van-uploader__upload-icon{
  color:#fff;
}
::v-deep .van-field__control{
  color:#fff;
}
.feedback{
  background-color: #282828;

  padding: 10px;
  .feedback-tit{
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
    color: #fff;
  }
}
</style>
